<template>
  <div class="d_mainFlex container">
    <div class="case">
      <na-table
        :datas.sync="tableData"
        :searchObj.sync="search"
        @newAdd="addClick"
        @updateDatas="getProductList"
        @change="handleScreenChange"
      >
      </na-table>
    </div>
    <!-- 新建产品   -->
    <el-dialog
      :title="titleName+'产品'"
      :visible.sync="isAddPersonnel"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="30%"
      @close="closeDialog"
    >
      <div class="dialogDody flex flex_start">
        <div class="flex1">
          <el-form
            ref="formModel"
            :model="formModel"
            :rules="rules"
            label-width="80px"
            class="dialogForm"
          >
            <el-form-item label="客户名称" prop="customerCode">
              <el-select
                v-model="formModel.customerCode"
                placeholder="请选择客户名称"
                clearable
                filterable
                @change="handleCustomerNameChange"
                size="small"
              >
                <el-option
                  v-for="item in customerList"
                  :key="item.customerCode"
                  :label="item.customerName"
                  :value="item.customerCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="产品类型" prop="productType">
              <el-select
                v-model="formModel.productType"
                placeholder="请选择产品类型"
                clearable
                filterable
                size="small"
              >
                <el-option
                  v-for="item in orderTypeList"
                  :key="item.objectCode"
                  :label="item.objectName"
                  :value="item.objectCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="产品版面" prop="productLayout">
              <el-select
                v-model="formModel.productLayout"
                placeholder="请选择"
                filterable
                size="small"
                @change="handlePorductLayout"
              >
                <el-option label="新版" value="新版"> </el-option>
                <el-option label="改版" value="改版"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称" prop="productName">
              <div class="flex" v-if="formModel.productLayout == '改版'">
                <el-select
                  filterable
                  v-model="formModel.productCode"
                  placeholder="请选择"
                  :disabled="formModel.customerCode == ''"
                  value-key="productName"
                  size="small"
                  @change="handleProductChange"
                >
                  <el-option
                    v-for="item in productViewList"
                    :key="item.productCode"
                    :label="item.productName"
                    :value="item.productCode"
                  />
                </el-select>
                <el-input
                  class="ml6"
                  style="width: 100px"
                  v-model="formModel.suffix"
                  :disabled="formModel.customerCode == ''"
                  placeholder="后缀"
                  size="small"
                />
              </div>
              <el-input
                v-else
                v-model="formModel.productName"
                placeholder="请输入产品名称"
                size="small"
              />
            </el-form-item>
            <!-- <el-form-item label="产品版本" prop="version">
              <el-input
                v-model="formModel.version"
                placeholder="请输入产品名称"
                size="small"
                disabled
              />
            </el-form-item> -->
            <el-form-item label="产品来源" prop="productSource">
              <el-select
                v-model="formModel.productSource"
                placeholder="请选择"
                filterable
                size="small"
              >
                <el-option label="新系统" :value="0"> </el-option>
                <el-option label="老系统" :value="1"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品单价" prop="productPrice">
              <el-input
                v-model="formModel.productPrice"
                type="number"
                placeholder="请输入产品单价"
                @blur="handlePriceBlur"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  元
                </div>
              </el-input>
            </el-form-item>
            <el-form-item label="保留彩稿" prop="keepColorDraft" v-if="formModel.productLayout == '改版'||titleName =='复制'">
              <el-switch
                v-model="formModel.keepColorDraft"
                :active-value="1"
                :inactive-value="0"
                >
              </el-switch>
            </el-form-item>
            <el-form-item label="产品要求">
              <el-input
                v-model="formModel.productRequirement"
                type="textarea"
                :rows="8"
                placeholder="请输入内容"
                size="small"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="flex flex_between">
          <div>
            <el-checkbox v-model="checked">继续新建下一条</el-checkbox>
          </div>
          <div>
            <el-button size="mini" @click="isAddPersonnel = false"
              >取 消</el-button
            >
            <el-button
              v-loading="addperLoading"
              :disabled="addperLoading"
              element-loading-spinner="el-icon-loading"
              type="primary"
              size="mini"
              @click="handleSave"
              >保 存</el-button
            >
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import naTable from "@/components/naTable";
import { arraySort } from "@/utils/index";
export default {
  name: "productManager",
  components: {
    naTable,
  },
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字"));
        } else {
          if (/^1[3-9]\d{9}$/.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 300);
    };
    return {
      state:true,
      tabLoading: false,
      departData: [], // 当前组织架构对应得部门
      orderTypeList: [], //产品类型数据
      customerList: [], //客户列表
      productViewList: [], //产品名称数据
      titleName:'',
      isAddorgOrdep: false, // 添加组织架构或者部门
      isAddPersonnel: false, // 是否显示新增人员弹框
      checked: false,
      addperLoading: false,
      allroles: {}, // 所有角色数据
      orgName: "", // 新增组织机构名称
      // 新增产品表单数据
      formModel: {
        customerCode: "",
        productType: "",
        productLayout: "",
        productCode: "",
        version: "v1.0", //版本
        suffix: "", //后缀
        productSource:0,
        productName: "",
        productPrice: "",
        productionRequirement: "",
        keepColorDraft:0,
      },
      // 产品列表搜索条件
      search: {
        pageIndex: 1,
        pageSize: 20,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 0,
        state: 0,
      },
      formObj: {},
      rules: {
        customerCode: [
          {
            required: true,
            message: "请选择客户名称",
            trigger: "change",
          },
        ],
        productType: [
          {
            required: true,
            message: "请选择产品类型",
            trigger: "change",
          },
        ],
        productLayout: [
          {
            required: true,
            message: "请选择产品版面",
            trigger: "change",
          },
        ],
        productSource: [
          {
            required: true,
            message: "请选择产品来源",
            trigger: "change",
          },
        ],
        productName: [
          {
            required: true,
            message: "请输入产品名称",
            trigger: "blur",
          },
        ],
        productPrice: [
          {
            required: true,
            message: "请输入产品单价",
            trigger: "blur",
          },
        ],
      },

      tableData: {
        headId: "head", //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: "employeeID", //表格列表key,也就是一条数据的唯一标识
        senior: false, //高级搜索是否显示
        disableWord: "isDisabled", //是否禁用显示的字段
        disableStatus: "启用", //判断未禁用的状态值
        isLockedWord: "lockedName",
        isLockedStatus: "解锁",
        // addTitle:'',//新建按钮名称-为''则不显示，为undefine则为新建
        addPermission: "", //新建按钮权限
        voidWord: "", //需要查询作废的字段
        statusList: [
          {
            label: "全部",
            value: 0,
          },
          {
            label: "待锁定产品",
            value: 1,
          },
          {
            label: "业务信息待填写产品",
            value: 2,
          },
          {
            label: "设计信息待填写产品",
            value: 3,
          },
          {
            label: "生成信息待填写产品",
            value: 4,
          },
          {
            label: "包装信息待填写产品",
            value: 5,
          },
        ], //状态筛选条件列表
        statusWord: "state", //状态筛选的字段
        //表格按钮
        operationBtn: [
          {
            title: "锁定", //按钮名称
            methodsName: "handleLooked", //按钮绑定方法的字段
            permission: "", //按钮权限
          },
          {
            title: "查看", //按钮名称
            methodsName: "handleSee", //按钮绑定方法的字段
            permission: "", //按钮权限
          },
          {
            title: "禁用", //按钮名称
            methodsName: "handleDisable", //按钮绑定方法的字段
            permission: "", //按钮权限
          },
          {
            title: "复制", //按钮名称
            methodsName: "handleCopy", //按钮绑定方法的字段
            permission: "", //按钮权限
          },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      },
    };
  },
  created() {
    //  获取列表
    this.getProductList();
    // 获取员工表头
    this.getTableHead();
    //获取产品类型
    this.getProductType();
    //获取客户列表
    this.getQueryPageCustomerList();

    this.formObj = JSON.parse(JSON.stringify(this.formModel));
  },
  mounted() {},
  methods: {
    // 新建点击事件
    addClick() {
      this.titleName = '新增'
      this.isAddPersonnel = true;
      this.checked = false;
    },

    //单价保留小数
    handlePriceBlur(){
      this.formModel.productPrice = Number(this.formModel.productPrice)
      this.formModel.productPrice = JSON.parse(this.formModel.productPrice.toFixed(4))
    },

    //锁定
    handleLooked(row) {
      let state;
      if (row.isLocked == "待锁定") {
        state = 1;
      } else {
        state = 0;
      }
      let obj = {
        state: state,
        productCode: row.productCode,
      };
      this.$api.business.UpdateProductState(obj).then((res) => {
        this.$message.success("设置成功");
        this.getProductList();
      });
    },

    //禁用
    handleDisable(row){
      let state;
      if (row.isDisabled == "启用") {
        state = 6;
      } else {
        state = 7;
      }
      let obj = {
        state: state,
        productCode: row.productCode,
      };
      this.$api.business.UpdateProductState(obj).then((res) => {
        this.$message.success("设置成功");
        this.getProductList();
      });
    },

    //查看
    handleSee(data) {
      this.$router.push({
        path: "/business/productDetail", // 跳转的路径
        query: {
          productCode: data.productCode,
          type: "see",
          isLocked:data.isLocked
        },
      });
    },

    //复制
    handleCopy(row){
      this.titleName = '复制'
      this.formModel = JSON.parse(JSON.stringify(row)) 
      this.formModel.productLayout = '新版'
      this.getMatchProductViewList()
      this.formModel.productID = 0
      this.isAddPersonnel = true;
    },

    handlePorductLayout(e){
      if(e == '改版'){
        this.formModel.version = 'V1.1'
      }else{
        this.formModel.version = 'V1.0'
      }
    },

    //获取产品类型
    getProductType() {
      this.$api.business.GetSaleOrderTypeDataList().then((res) => {
        this.orderTypeList = res;
      });
    },

    //客户名称下拉选择事件
    handleCustomerNameChange(){
      this.getMatchProductViewList()
      this.formModel.productCode = ''
    },

    //获取产品名称下拉
    getMatchProductViewList() {
      this.$api.business.GetMatchProductViewList({queryValue:this.formModel.customerCode}).then((res) => {
        this.productViewList = res;
      });
    },

    handleProductChange(e) {
      this.productViewList.forEach((item)=>{
        if(item.productCode == e){
          this.formModel.productName = item.productName
          this.productName = item.productName
        }
      })
      // this.formModel.productCode = e.productCode;
      // this.formModel.productName = e.productName;
    },

    // 获取客户列表
    getQueryPageCustomerList() {
      const cusSearch = {
        likeWords: "",
        settlementWay: 0,
        belongToSalesman: "",
        pageIndex: 1,
        pageSize: 9999,
      };
      this.$api.business.QueryPageCustomerList(cusSearch).then((res) => {
        this.customerList = res.list;
      });
    },
    // 保存
    handleSave() {
      if(this.formModel.productLayout == '改版'){
        this.formModel.productName = this.productName+this.formModel.suffix
      }
      if(!this.formModel.productName || this.formModel.productName == 'undefined'){
        this.$message.warning('请输入产品名称')
        return
      }
      this.$refs.formModel.validate((valid) => {
        if (valid) {
            this.$api.business.AddProduct(this.formModel).then((res) => {
              this.$message.success("保存成功");
              this.getProductList();
              this.isAddPersonnel = false;
            }).catch((err)=>{

            })
        }
      });
    },

    handleScreenChange(){
      this.search.pageIndex = 1
      this.getProductList()
    },

    // 获取产品列表
    getProductList() {
      const parmas = this.search;
      this.tabLoading = true;
      this.$api.business
        .GetPageProductList(parmas)
        .then((res) => {
          res.list.forEach((item) => {
            if(item.isLocked == 0){
              item.isLocked = "待锁定"
              item.lockedName = "锁定"
            }else{
              item.isLocked = "已锁定"
              item.lockedName = "解锁"
            }
            item.isCompletedBusniess == 0
              ? (item.isCompletedBusniess = "待填写")
              : (item.isCompletedBusniess = "已填写");
            item.isCompletedDesign == 0
              ? (item.isCompletedDesign = "待填写")
              : (item.isCompletedDesign = "已填写");
            item.isCompletedProduce == 0
              ? (item.isCompletedProduce = "待填写")
              : (item.isCompletedProduce = "已填写");
            if (item.isCompletedPackage == 0) {
              item.isCompletedPackage = "待填写";
            } else {
              item.isCompletedPackage = "已填写";
            }
            if(item.isDisabled == 0){
              item.isDisabled = '启用'
            }else{
              item.isDisabled = '禁用'
            }
          });
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.tabLoading = false;
        })
        .catch(() => {
          this.tabLoading = false;
        });
    },
    // 获取某个组织架构下得所有部门列表
    getOrgDepart() {
      const parmas = {
        orgCode: this.search.organizationCode,
      };
      this.$api.user.getOrgDepart(parmas).then((res) => {
        this.departData = res;
      });
    },
    // 获取产品列表表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.ProductManager,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableData.thead = res;
      });
    },
    // 关闭弹框事件
    closeDialog() {
      // 关闭弹框的时候清空数据
      if (this.$refs.personnelForm) {
        this.$refs.personnelForm.resetFields();
      }
      if (this.$refs.personnelEditForm) {
        this.$refs.personnelEditForm.resetFields();
      }
      this.formModel = this.$options.data().formModel;
    },
  },
};
</script>
  <style lang="scss" scoped>
.addHeadCon {
  width: 120px;

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    box-shadow: 0px 2px 6px 0px rgba(232, 239, 251, 1);
  }
}

.permanageLf {
  .treeOpdiv {
    width: 120px;
    top: 25px;

    ul {
      padding: 4px 0;

      li {
        line-height: 30px;
        text-align: center;

        &:hover {
          background: #3f61f1;
          color: #fff;
        }
      }
    }
  }

  .orgCon:hover {
    background: #eff2ff;
  }

  .memberList {
    li {
      margin: 10px 0;
    }
  }

  .custom-tree-node {
    width: 100%;

    .treeoprions {
      display: none;
    }
  }

  .custom-tree-node:hover {
    .treeoprions {
      display: block !important;
    }
  }
}

.dialogDody {
  .labelTT {
    width: 88px;
    line-height: 28px;
  }
}

::v-deep .dialogForm .el-form-item {
  margin-bottom: 5px;
}
</style>
